import React, { Component } from 'react'
import { Layout, Menu , Button} from 'antd';
//引入菜单跳转需要的link
import {Link} from 'dva/router'
import styles from './navBar.less';

export default class navBar extends Component {
    constructor(props){
        super(props);
        //以下的selectedKeys属性是为了解决
        //如果在浏览器地址栏输入最后的文件路径，会造成显示内容和导航栏矛盾的冲突
        //而props有对应的属性能获取pathname,从而设置导航栏选择浏览的页面内容
        this.state={
            selectedKeys:[]
        };
    }
    //页面刷新时，组件会重新加载，会执行下面这个cdm钩子函数
    //为解决刷新页面菜单与路由不同步问题，解决方法则放在以下着函数里执行。
    componentDidMount(){
        this.handleSetselectedKeys(this.props.location.pathname);
    }

    UNSAFE_componentWillReceiveProps(nextprops){
        const {pathname}=this.props.location;
        if(nextprops.location.pathname!==pathname){
            //当路由发生改变时，改变当前菜单选中key值
            this.handleSetselectedKeys(nextprops.location.pathname);
        }
    }
    handleSetselectedKeys(pathname){
        //根据‘/’把路由地址分成一个数组 /admin=>['/','admin']
        const temp=pathname.split('/');
        //如果数组的长度小于2，表示的是只有根路径/，设置为Home,否则取数组中第二个值
        const key=temp&&temp.length<2?'home':temp[1];
        this.setState({
            selectedKeys:[key]
        })
    }
    render() {
        return (
            <nav className={styles.header}>
                <a href="#"  >
                    {/* 这里放一个图标 */}
                    <img className={styles.logo} src={require('../../assets/navicon.png')}></img>
                </a>
                <Menu className={styles['menu-left']}
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={["home"]}
                    selectedKeys={this.state.selectedKeys}>
                        {/* 注意link to 后面的路径要跟主页面定义的一级路径一致 */}
                    <Menu.Item key={"home"}><Link to='/home'>主页</Link></Menu.Item>
                    <Menu.Item key={"menus"}><Link to='/menus'>菜单</Link></Menu.Item>
                    <Menu.Item key={"manage"}><Link to='/manage'>管理</Link></Menu.Item>
                    <Menu.Item key={"about"}><Link to='/about'>关于我们</Link></Menu.Item>
                    <Menu.Item key={"login"} className={styles.login}><Link to='/login'>登录</Link></Menu.Item>
                    <Menu.Item key={"register"} className={styles.register}><Link to='/register'>注册</Link></Menu.Item>
                </Menu>
            </nav>
        )
    }
}

